<template>
	<view class="wf-item-page">

		<image :src="item.url" mode="widthFix" class="item-img" />
		<view class="item-info">
      <div class="btn" @click="generate(item.id)"><p>生 成</p></div>
		</view>
<!--    <view class="item-info">-->
<!--			<image :src="item.avatar.avatar" mode="aspectFill" class="info-avatar" />-->
<!--			<view class="info-nickname">{{ item.createBy }}</view>-->
<!--		</view>-->

	</view>
</template>

<script>
	import Api from "../../API/api";

  export default {
		props: {
			item:{}
		},
    data(){
      return{
        lock:true
      }
    },
    methods:{
      generate(id) {
        if (this.lock) {
          this.lock = false
          uni.showToast({
            title: '加载中',
            icon: 'loading',
            duration: 10000
          });
          Api.getcreateMaterial(id).then(res => {
            uni.showToast({
              title: '添加成功',
              icon: 'checkmarkempty'
            })
          })
          this.lock = true
          uni.hideLoading();
        }
      }
    }

	}
</script>

<style lang="scss" scoped>

	.wf-item-page {
		//background: #fff;
    position: relative
	}
  image{
    overflow: hidden;
    border-radius: 10px;
  }
	.item-img {
  	width: 100%;
  }

	.item-info {
		//display: flex;
		align-items: center;
		//padding: 5px;
    width: 100%;
    .btn {
      margin: auto;
      height: 50 rpx;
      width: 100rpx;
      text-align: center;
      background-color: #494343;
      color: #fff;
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform : translateX(-50%);
      //margin: 30 rpx auto;
      z-index: 9999;
      line-height: 50rpx;
      border-radius: 50rpx;
      color: rgb(192, 192, 192);
      p{

      }
    }
	}

	.info-avatar {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		margin-right: 5px;
	}

	.info-nickname {
		font-size: 12px;
		color: #333;
	}
</style>